import React, { useEffect } from 'react';
import HgBreadCrumb from '../../../components/HgBreadCrumb';
import "./index.scss"

//1.导入echarts
import * as echarts from 'echarts';

const Echarts = () => {
    
    // 注意: 获取dom节点一定要在dom渲染完成之后进行. 绘制图表一定要在实例化echarts之后进行, dom节点必须提前设置宽/高
    useEffect(()=>{
        
        drawEcharts('echarts1',{
            title: {
                text: '本年销量趋势',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        drawEcharts('echarts2',{
            title: {
                text: '商品统计',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
            {
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        drawEcharts('echarts3',{
            title: {
                text: '利润统计',
                left: 'center'
            },
            tooltip: {},
            series: [
            {
                name: '销量',
                type: 'pie',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        drawEcharts('echarts4',{
            title: {
                text: '净利润统计',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
            {
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
        
    },[])

    var drawEcharts = (id:any,options:any)=>{
        //2.实例化echarts
        var myChart1 = echarts.init(document.getElementById(id)||document.body);
        //3.绘制图表
        myChart1.setOption(options);
       /*  myChart1.setOption({
            title: {
                text: 'ECharts 入门示例',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }); */
    }

    return (
        <div className='echarts'>
            <HgBreadCrumb />
            
            <div className="echarts-box">
                <div className='echarts' id="echarts1"></div>
                <div className='echarts' id="echarts2"></div>
                <div className='echarts' id="echarts3"></div>
                <div className='echarts' id="echarts4"></div>
            </div>
        </div>
    );
};

export default Echarts;